<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="renderer" content="webkit">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta name="format-detection" content="telephone=no,email=no"/>
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>商家</title>
<link rel="icon" href="">
<link rel="stylesheet" type="text/css" href="/assets/front/newH5/css/common-m.css">
 <link rel="stylesheet" href="${base!}/assets/front/newH5/css/index.css?v=${@date.getDateTime()}" />
    <style>
        .area {
            margin: 20px auto 0px auto;
        }
        .mui-input-group:first-child {
            margin-top: 20px;
        }
        .mui-input-group label {
            width: 35%;
        }
        .mui-input-row label~input,
        .mui-input-row label~select,
        .mui-input-row label~textarea {
            width: 65%;
        }
        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }
        .mui-content-padded {
            margin-top: 25px;
        }
        .mui-btn {
            padding: 10px;
        }
    </style>
</head>
<!-- 给body加一个空的touchstart事件即可让:active效果在移动端生效 -->
<body ontouchstart="" class="bgGray" style="background: white;">
<section class="center" id="productList">
    <!-- header -->
    <header class="header">
        <section class="search">
            <input type="text" name="" id="searchKey" placeholder="请输入商品名称" class="searchText" />
            <button id="search" v-on:click="getProductList()">搜索</button>
        </section>
        <section class="clear searchCondition">
            <a href="javascript:void(0);" class="selBtn" onclick="chooseSelect('item1',this);">销量</a>
            <a href="javascript:void(0);" class="selBtn" onclick="chooseSelect('item2',this);">价格</a>
            <a href="javascript:void(0);" class="selBtn" onclick="chooseSelect('item3',this);">筛选</a>
            <a href="javascript:void(0);" class="selBtn" onclick="chooseSelect('item4',this);">分类</a>
        </section>
    </header>
    <!-- /header -->
    <!-- main -->
    <section class="main" >
        <div id="selectDiv">
            <div id="item1" class="mui-control-content" style="display: none">
                <ul class="mui-table-view selectUl" >
                    <li class="mui-table-view-cell cell-width selectLi" sortType="numDesc" v-on:click="productSort($event)">
                        销量从高到低
                    </li>
                    <li class="mui-table-view-cell selectLi" sortType="numAsc" v-on:click="productSort($event)">
                        销量从低到高
                    </li>
                </ul>
            </div>
            <div id="item2" class="mui-control-content" style="display: none">
                <ul class="mui-table-view selectUl">
                    <li class="mui-table-view-cell cell-width selectLi" sortType="priceDesc" v-on:click="productSort($event)">
                        价格从高到低
                    </li>
                    <li class="mui-table-view-cell selectLi" sortType="priceAsc" v-on:click="productSort($event)">
                        价格从低到高
                    </li>
                </ul>
            </div>
            <div id="item3" class="mui-control-content " style="display: none">
                <ul class="mui-table-view priceUl selectUl" selectUl>
                    <!--<div class="mui-table-view-cell priceLi">-->
                    <li class="priceSpan selectLi" priceArea="0_20" v-on:click="priceSelect($event)" >0-20</li>
                    <li class="priceSpan selectLi" priceArea="20_40" v-on:click="priceSelect($event)">20-40</li>
                    <li class="priceSpan selectLi" priceArea="40_60" v-on:click="priceSelect($event)">40-60</li>
                    <!--</div>-->
                    <!--<div class="mui-table-view-cell priceLi">-->
                    <li class="priceSpan selectLi" priceArea="60_80" v-on:click="priceSelect($event)">60 - 80</li>
                    <li class="priceSpan selectLi" priceArea="80_100" v-on:click="priceSelect($event)">80-100</li>
                    <li class="priceSpan selectLi" priceArea="100_1000000" v-on:click="priceSelect($event)">100 以上</li>
                    <!--</div>-->
                </ul>
            </div>
            <div id="item4" class="mui-control-content " style="display: none">
                <ul class="mui-table-view priceUl selectUl" selectUl v-for="item in goodClassList" :key="item.id">
                    <!--<div class="mui-table-view-cell priceLi">-->
                    <li class="priceSpan selectLi" :classId="item.id" v-on:click="classSelect($event)" >{{item.name}}</li>
                </ul>
            </div>
        </div>
        <ul class="clear">
            <li v-for="item in productList" :key="item.id">
                <a v-bind:href="'${base!}/open/h5/product/productDetail.html?id='+item.id" >
                    <img :src="item.imgList" alt="" />
                    <b>{{item.name}}</b>
                    <p><span>￥<i>{{item.price}}</i></span><em>月销<strong>{{item.saleNumMonth}}</strong>笔</em></p>
                </a>
            </li>
        </ul>
    </section>
    <!-- mian end -->
    <footer>
        <ul>
            <li>
                <a href="javascript:void(0);" onclick="window.location.href='${base!}/open/h5/niantu/index.html'">
                    <img src="${base!}/assets/front/newH5/images/icon1.png" alt="" />
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="${base!}/assets/front/newH5/images/icon2.png" onclick="window.location.href='${base!}/open/h5/cart/shoppingCart.html'" alt="" />
                    <span>购物车</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="${base!}/assets/front/newH5/images/icon3.png" alt="" onclick="window.location.href='${base!}/open/h5/coupon/receiveCoupon.html'" />
                    <span>领券中心</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0);">
                    <img src="${base!}/assets/front/newH5/images/icon4.png" alt="" onclick="window.location.href='${base!}/open/h5/niantu/userCenter.html'" />
                    <span>个人中心</span>
                </a>
            </li>
        </ul>
    </footer>
</section>
    <script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
    <script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
    <script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
    <script type="text/javascript" src="${base!}/assets/decorate/pc/decoratecommon/js/layer/mobile/layer.js" ></script>
    <script type="application/javascript">

        var vue = new Vue({
            el: '#productList',
            data: {
                productList: [],
                goodClassList:[],
            },
            created:function () {   //实例初始化创建完成执行

                this.getProductList() ;//调用自身方法
                this.getGoodClassList();
                // this.getCartNum();
            },
            methods:{              //定义封装方法
                //获取列表
                getProductList:function () {
                    var self = this;
                    var key = $("#searchKey").val();
                    $.ajax({
                        type:"POST",
                        url:"${base!}/open/h5/product/ProductList.html",
                        dataType:"JSON",
                        data:{
                            key:key,
                            goodsClass:'${goodsClass!}'
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var d = data.data;
                                self.productList = d;
                            } else {

                            }
                        }
                    });

                },
                getGoodClassList:function () {
                    var self = this;
                    $.ajax({
                        type:"POST",
                        url:"${base!}/open/h5/product/getGoodClass.html",
                        dataType:"JSON",
                        data:{
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var d = data.data;
                                self.goodClassList = d;
                            } else {

                            }
                        }
                    });

                },

                priceSelect: function (event) {
                    var self = this;
                    var key = $("#searchKey").val();
                    $(".priceSpan").removeClass("price-active");
                    $(event.target).addClass("price-active");
                    var priceArea = $(event.target).attr("priceArea");
                    $.ajax({
                        type:"POST",
                        url:"${base!}/open/h5/product/ProductList.html",
                        dataType:"JSON",
                        data:{
                            key:key,
                            priceArea:priceArea,
                            goodsClass:'${goodsClass!}'
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var d = data.data;
                                self.productList = d;
                                $("#item1").hide();
                                $("#item2").hide();
                                $("#item3").hide();
                                $("#item4").hide();
                                $(".selBtn").removeClass("active");
                                // var t;
                                // clearTimeout(t)
                                // t = setTimeout(function (){
                                //     $("#item3").removeClass("mui-active");
                                //     $(".mui-control-item").removeClass("mui-active");
                                // }, 10);
                            } else {

                            }
                        }
                    });
                },
                classSelect: function (event) {
                    var self = this;
                    var key = $("#searchKey").val();
                    $(".priceSpan").removeClass("price-active");
                    $(event.target).addClass("price-active");
                    var classId = $(event.target).attr("classId");
                    $.ajax({
                        type:"POST",
                        url:"${base!}/open/h5/product/ProductList.html",
                        dataType:"JSON",
                        data:{
                            key:key,
                            classId:classId
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var d = data.data;
                                self.productList = d;
                                $("#item1").hide();
                                $("#item2").hide();
                                $("#item3").hide();
                                $("#item4").hide();
                                $(".selBtn").removeClass("active");
                                // var t;
                                // clearTimeout(t)
                                // t = setTimeout(function (){
                                //     $("#item3").removeClass("mui-active");
                                //     $(".mui-control-item").removeClass("mui-active");
                                // }, 10);
                            } else {

                            }
                        }
                    });
                },

                productSort: function (event) {
                    var self = this;
                    var key = $("#searchKey").val();
                    var sortType = $(event.target).attr("sortType");
                    $.ajax({
                        type:"POST",
                        url:"${base!}/open/h5/product/ProductList.html",
                        dataType:"JSON",
                        data:{
                            key:key,
                            sortType:sortType,
                            goodsClass:'${goodsClass!}'
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var d = data.data;
                                self.productList = d;
                                $("#item1").hide();
                                $("#item2").hide();
                                $("#item3").hide();
                                $("#item4").hide();
                                $(".selBtn").removeClass("active");
                            } else {

                            }

                        }
                    });
                }
            }

            ,
            watch:{     //监听器
                // carModel:function () {
                //     this.getProvince();
                // }
            }

        })
        function chooseSelect(item,a) {
            var b = $("#"+item).css("display");
            if(b=='none'){
                $("#item1").hide();
                $("#item2").hide();
                $("#item3").hide();
                $("#item4").hide();
                $(".selBtn").removeClass("active");
                $("#"+item).show();
                $(a).addClass("active");
            }else {
                $("#item1").hide();
                $("#item2").hide();
                $("#item3").hide();
                $("#item4").hide();
                $(".selBtn").removeClass("active");
            }

        }
    </script>
</body>
</html>